<template>
	<view>
		<!-- <u-navbar @leftClick="leftClick" leftText="返回" title="服务" placeholder fixed>
		</u-navbar> -->
		<u-navbar title="服务" placeholder fixed>
			<view class="navbar-left-text" slot="left">
				<view v-if="!isShowBackHome"  @click="leftClick" class="">返回</view>
			</view>
			<view class="navbar-left-text" slot="left">
				<uni-icons v-if="isShowBackHome" type="home-filled" size="24" style="margin-left: 10rpx;" @click="goHome"></uni-icons>
			</view>
		</u-navbar>
		
		<view class="content">
			<view class="header">
				<view class="search-box">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/search-img.png" mode=""></image>
						<input @input="resizeInput" v-model="search" type="text" placeholder="请输入关键词" />
					</view>
					<view class="search-btn">搜索</view>
				</view>
			</view>
			
			<view class="selectBox">
				<view class="select" @click="select(1)" :class="{active: type === 1}">默认</view>
				<view class="select" @click="show = true" :class="{active: type === 2}">{{sex}}
					<u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
				</view>
				<view class="select" @click="select(3)" :class="{active: type === 3}">距离 <u-icon size="12" color="#DCDCDC"
						style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
				</view>
			</view>
			
			<scroll-view scroll-y="true" class="main" @scrolltolower="lower()" @refresherrefresh="onRefresh" :refresher-enabled="true" :refresher-triggered="triggered">
				<view class="list" v-for="(item,index) of list" :key="index" @click="detail(item.user_id)">
					<image :src="oss(item.avatar)" class="cover" mode="aspectFill"></image>
					<view class="info">
						<view class="title">
							<view class="l">{{item.nickname}}</view>
							<view class="r">
								<u-icon name="map-fill" size="20" color="#428DFC"></u-icon>{{item.juli.toFixed(1)}}km
							</view>
						</view>
						
						<view class="num">
							<view class="address">年龄：{{item.age}}</view>
							<view class="l"><text class="type">服务项目</text>
								<view class="word">{{item.name || item.catename}}</view>
							</view>
							<!-- <view class="r"><text class="icon">¥</text>{{item.price}}</view> -->
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<!-- <view class="skill-arr" v-for="i in item.skill_arr">{{i.name}} <text style="color: red;">{{i.price}}</text> </view> -->
							<view class="skill-arr">
								<view class="" style="display: inline-block;margin-right: 10rpx;" v-for="i in item.skill_arr">{{i.name}}<text style="color: red;">￥{{i.price}}</text> </view>
							</view>
							
							<view class="mobile-btn" @click.stop="dmobile(item)">联系电话</view>
						</view>
					</view>
					<view class="vip" v-if="item.isplus>0">
						<image src="../../static/serve/vip.png" mode="" class="icon"></image>
						<view class="word">推荐</view>
					</view>
				</view>
				
				<u-empty v-if="finish && list.length === 0" :marginTop="200">
				</u-empty>
			</scroll-view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		
		<u-popup :show="mobileShow" @close="mobileShow = false" @open="mobileShow = true" mode="center" round="20">
			<view class="userBox">
				<image :src="oss(user.avatar)" class="avatar" mode="aspectFill"></image>
				<view class="name">{{user.nickname}}</view>
				<view class="tel">联系电话：{{user.mobile}}</view>
				<view class="info">联系对方时，请告知对方，我们是从哪个平台上看到的</view>
				<view class="btns" @click="tel">拨打</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.130.js';
	export default {
		data() {
			return {
				barHeight:'',
				type:1,
				juli_sort:'',
				sex: '性别筛选',
				show: false,
				columns: [
					['男', '女']
				],
				gender_sort: '',
				list:[],
				page:1,
				finish:false,
				_freshing: false,
				triggered: false,
				cate_id:'',
				search:'',
				mobileShow:false,
				user:'',
				isShowBackHome:false
			}
		},
		onLoad(option) {
			this.cate_id = option.cate_id || ''
			this.search = option.name || ''
			// this.barHeight = uni.getSystemInfoSync().statusBarHeight
			
			let that = this
			// setTimeout(() => {
			// 	uni.hideLoading();
			// 	that.latitude = uni.getStorageSync('lat');
			// 	that.longitude = uni.getStorageSync('lng');
			// 	that.city = uni.getStorageSync('city');
			// 	that.reload()
			// },6000)
			// uni.getStorageSync('lng')
			if(uni.getStorageSync('lng')){
				this.latitude = uni.getStorageSync('lat');
				this.longitude = uni.getStorageSync('lng');
				this.city = uni.getStorageSync('city');
				that.getList()
			} else if(uni.getStorageSync('token')){
				uni.showLoading({
					title: '获取信息中'
				});
				
				let amapPlugin = new amap.AMapWX({
					key: 'fdca19ddc2301158a38cfda641e37a08'
				});
				amapPlugin.getRegeo({
					success: (data) => {
						
						console.log(data, '成功')
						that.longitude = data[0].longitude
						that.latitude = data[0].latitude
						if (data[0].regeocodeData.addressComponent.city === '[]' || data[0].regeocodeData
							.addressComponent.city.length === 0) {
							that.city = data[0].regeocodeData.addressComponent.province;
						} else {
							that.city = data[0].regeocodeData.addressComponent.city;
						}
						uni.setStorageSync('province', data[0].regeocodeData.addressComponent.province);
						uni.setStorageSync('city', data[0].regeocodeData.addressComponent.city);
						uni.setStorageSync('district', data[0].regeocodeData.addressComponent.district);
						uni.setStorageSync('lng', data[0].longitude);
						uni.setStorageSync('lat', data[0].latitude);
						uni.hideLoading();
						that.getList()
					},
					fail: (e) => {
						uni.showModal({
							title: '提示',
							content: '您设备的位置信息未开启，将无法显示根据您最近的服务者，开启位置信息后，再进入半柿，可享受更好的服务',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									if(uni.getStorageSync('lng')){
										that.latitude = uni.getStorageSync('lat');
										that.longitude = uni.getStorageSync('lng');
										that.city = uni.getStorageSync('city');
										that.reload()
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
						uni.hideLoading();
						// that.city = '郑州市';
						// that.longitude = '113.67734';
						// that.latitude = '34.75383';
						// that.getList()
					}
				});
			}
			let pages = getCurrentPages()
			if(pages.length === 1){
				this.isShowBackHome = true
			}
		},
		onShareTimeline(){
		    return{
		      title:'找师傅帮忙找半柿，各行各业的师傅随叫随到',  //分享的标题
		      query:'',     //点击分享链接之后进入的页面路径
		      imageUrl:'', // 设置分享卡片图片
		    }
		},
		methods: {
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			leftClick(){
				uni.navigateBack()
			},
			dmobile(item){
				if(!uni.getStorageSync('token')){
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				this.user = item
				this.mobileShow = true
			},
			tel() {
				uni.$u.http.post('/mobilelog',{
					mobile:this.user.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.makePhoneCall({
							phoneNumber: this.user.mobile
						});
					}
				}).catch((res) => {
				
				})
			},
			resizeInput(){
				this.reload()
			},	
			detail(id) {
				uni.$u.route({
					url: 'pages/serve/detail',
					params: {
						id: id
					}
				})
			},
			onRefresh() {
				if (this._freshing) return;
				this.refreshText = "刷新中...";
				this._freshing = true;
				if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.reload()
			},
			//距离
			select(type) {
				this.type = type
				if (type === 3) {
					this.juli_sort = 0
				} else {
					this.juli_sort = ''
					this.sex = '性别筛选'
				}
				this.reload()
			},
			//性别
			confirm(e) {
				// console.log(e,'？？？？？nvnv')
				this.gender_sort = e.indexs[0]
				this.sex = e.value[0]
				this.show = false
				this.type = 2
				this.reload()
			},
			reload() {
				this.finish = false
				this.page = 1
				this.list = []
				console.log('!!!!!!')
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				let data = {
					city: this.city,
					lng: this.longitude,
					lat: this.latitude,
					// city: '郑州市',
					// lng: '116.397455',
					// lat: '39.909187',
					page: this.page,
					cate_id:this.cate_id,
					name:this.search
				}
				console.log(this.type)
				console.log(this.gender_sort)
				if (this.type === 2) {
					data.gender_sort = this.gender_sort
				} else if (this.type === 3) {
					data.juli_sort = this.juli_sort
				}
				uni.$u.http.post('/skill', data).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.list = this.list.concat(res.data.list)
						if (res.data.list.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
			
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #F6F6F6;
		height: 100vh;
		display: flex;
		flex-direction: column;
		
		.main {
			flex: 1;
			overflow: hidden;
			
			
			.list {
				display: flex;
				align-items: center;
				margin: 24rpx 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 24rpx;
				position: relative;
			
				.cover {
					width: 180rpx;
					height: 180rpx;
					margin-right: 20rpx;
					flex-direction: 0;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
			
				.address {
					font-size: 25rpx;
					color: #575859;
					margin: 10rpx 0 10rpx;
				}
			
				.vip {
					position: absolute;
					left: 0;
					top: 40rpx;
					width: 74rpx;
					height: 44rpx;
			
					.icon {
						width: 74rpx;
						height: 44rpx;
					}
			
					.word {
						width: 74rpx;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #191615;
						font-size: 20rpx;
						position: absolute;
						left: 0;
						top: -10rpx;
						font-weight: bold;
					}
				}
			
				.info {
					flex: 1;
					overflow: hidden;
			
					.title {
						display: flex;
						align-items: center;
						overflow: hidden;
			
						.l {
							flex: 1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
						}
			
						.r {
							flex-shrink: 0;
							color: #428DFC;
							font-size: 24rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
						}
					}
			
					.num {
						display: flex;
						align-items: center;
						justify-content: space-between;
			
						.l {
							display: flex;
							align-items: center;
			
							.type {
								color: #999999;
								font-size: 24rpx;
								min-width: 50rpx;
							}
			
							.word {
								background-color: #FFFAE5;
								height: 36rpx;
								border-radius: 18rpx;
								color: #FF8007;
								font-size: 20rpx;
								padding: 0 20rpx;
								display: flex;
								align-items: center;
							}
						}
			
						.r {
							color: #FF5B1A;
							font-size: 40rpx;
			
							.icon {
								font-size: 28rpx;
							}
						}
					}
					.skill-arr {
						display: flex;
						justify-content: space-around;
						font-size: 24rpx;
						// background-color: #428DFC;
						width: 340rpx;
						 display: -webkit-box; /* 将容器作为弹性盒子 */
						  -webkit-box-orient: vertical; /* 垂直排列盒子内容 */
						  -webkit-line-clamp: 3; /* 设置最大行数为1行 */
						// overflow: hidden;
						// overflow-x: auto;
						// white-space: nowrap;
						
					}
					.mobile-btn {
						display: inline-block;
						font-size: 22rpx;
						border-radius: 10rpx;
						padding: 5rpx 10rpx;
						background-color: #FEBF4E;
						float: right;
					}
				}
			}
		}
		
		.search-box {
			width: 686rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 39rpx 39rpx 39rpx 39rpx;
			border: 1rpx solid #FEBF4E;
			margin: auto;
			margin-top: 21rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 32rpx;
				margin-right: 16rpx;
			}
			.search-btn {
				width: 110rpx;
				height: 58rpx;
				background: #FEBF4E;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-right: 6rpx;
				font-size: 22rpx;
				color: #333333;
				line-height: 26rpx;
				text-align: center;
				line-height: 58rpx;
			}
		}
		
		.selectBox {
			display: flex;
			align-items: center;
			// padding: 20rpx 0;
			padding-top: 20rpx;
			margin-left: 32rpx;
		
			.select {
				// flex: 1;
				margin-right: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #575859;
				font-size: 25rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				padding: 14rpx 19rpx;
			}
		
			.typeBox {
				position: relative;
		
				.r {
					left: 0;
					top: 0;
					position: absolute;
					width: 100%;
					height: 100%;
					// opacity: 0;
					z-index: 100;
				}
			}
		
			.active {
				color: #FF8007;
			}
		}
	}
	
	.userBox{
		width: 520rpx;
		height: 540rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 50rpx;
		box-sizing: border-box;
		.avatar{
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
			border-radius: 50%;
			margin-top: -80rpx;
			margin-bottom: 20rpx;
		}
		.name{
			color: #191615;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.tel{
			color: #191615;
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		.info{
			background-color: #FFFAE5;
			border: 10rpx;
			padding: 20rpx;
			color: #FF8007;
			font-size: 22rpx;
			margin-bottom: 40rpx;
		}
		.btns{
			background: linear-gradient(to right, #FFDF41, #FFC141);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 72rpx;
			color: #191615;
			font-size: 30rpx;
			border-radius: 36rpx;
		}
	}
</style>